{{- extends "layout/default" }}
{{- import "blocks/underlinenav" }}
{{- block body() }}

<div class="d-none">
  <p>Daily</p>
  <p>Weekly</p>
  <p>Monthly</p>
  <p>Rookie</p>
  <p>Daily (R-18)</p>
  <p>Weekly (R-18)</p>
  <p>Weekly (R-18G)</p>
  <p>Original</p>
  <p>Popular among males</p>
  <p>Popular among females</p>
  <p>Popular among males (R-18)</p>
  <p>Popular among females (R-18)</p>
</div>
<div class="row justify-content-center g-4">
  <h1 class="text-center"><i class="bi bi-calendar me-2"></i>Ranking calendar</h1>

  <noscript>
    <div class="col-12">
      <div class="custom-card bg-charcoal-surface1 p-4 mb-4">
        <h2><i class="bi bi-gear-fill me-2"></i>Ranking options</h2>
        <div class="custom-card-body bg-charcoal-surface1 p-0">
          {{- Mode := isset(Queries.mode) ? Queries.mode : "daily" }}
          {{- url := "/rankingCalendar?date=" + .ThisMonth.Link + "&mode=" }}
          <div class="row border-bottom border-2 mb-4">
            <div class="col-12">
              <h3><i class="bi bi-calendar3 me-2"></i>Time frame</h3>
              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
                {{- path := slice("daily", "weekly", "monthly", "rookie") }}
                {{- name := slice("Daily", "Weekly", "Monthly", "Rookie")}}
                {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
              </div>
              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
                {{- path := slice("daily_r18", "weekly_r18", "r18g") }}
                {{- name := slice("Daily (R-18)", "Weekly (R-18)", "R-18G")}}
                {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
              </div>
              <p class="small text-body-secondary mb-4">Choose the time frame for the rankings.</p>
            </div>
          </div>

          <div class="row mb-4">
            <div class="col-12">
              <h3><i class="bi bi-star-fill me-2"></i>Specialized rankings</h3>
              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Specialized ranking modes">
                {{- path := slice("original", "male", "female") }}
                {{- name := slice("Original", "Popular among males", "Popular among females")}}
                {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
              </div>
              <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="R-18 specialized ranking modes">
                {{- path := slice("male_r18", "female_r18") }}
                {{- name := slice("Popular among males (R-18)", "Popular among females (R-18)")}}
                {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
              </div>
              <p class="small text-muted mb-0">Specialized ranking categories.</p>
            </div>
          </div>

          <div class="row">
            <div class="col-12 d-flex justify-content-between">
              <a href="/rankingCalendar" type="button" class="btn btn-danger fw-bold rounded-pill">Reset filters</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </noscript>

  <div class="col-12" id="checkpoint">
    <div class="custom-card">
      <div class="custom-card-body bg-charcoal-surface1 p-4">

        <!-- Header items -->
        <!-- TODO: make the Options button appear in the same block as the form at md breakpoint and below -->
        <div class="d-flex flex-column flex-md-row align-items-start justify-content-start justify-content-md-between mb-4" aria-label="Ranking options">
          <div class="d-flex flex-column mb-3 mb-md-0">
            <h2><i class="bi bi-calendar me-2"></i>{{ .ThisMonth.MonthLiteral }} {{ .Year }}</h2>
            <form action="/rankingCalendar" method="post">
              <input type="hidden" name="mode" value="{{ .Mode }}" />
              <label for="date" class="form-label fw-bold">Date (mm/dd/yyyy)</label>
              <div class="d-flex">
                <div class="col-auto me-2">
                  <input type="date" id="date" name="date" class="form-control" min="2007-09-01" max="{{.Year}}-{{ .ThisMonth.MonthPadded }}-01" value="{{.Year}}-{{ .ThisMonth.MonthPadded }}-01" />
                </div>
                <div class="col-auto">
                  <button type="submit" class="custom-btn-secondary">Go</button>
                </div>
              </div>
            </form>
          </div>
          <button class="js-required custom-btn-secondary" type="button" data-bs-toggle="modal" data-bs-target="#RankingOptionsModal">
            <i class="bi bi-gear-fill me-2"></i>Options
          </button>
        </div>

        <!-- Navigation buttons -->
        {{- include "fragments/rankingCalendarNav" . }}

        <!-- The ranking calendar itself -->
        <div class="row text-center fw-bold d-none d-lg-flex mb-3">
          <div class="col">Sun</div>
          <div class="col">Mon</div>
          <div class="col">Tue</div>
          <div class="col">Wed</div>
          <div class="col">Thu</div>
          <div class="col">Fri</div>
          <div class="col">Sat</div>
        </div>
        <div class="row row-cols-2 row-cols-md-5 row-cols-lg-7 g-3 mb-3">
          {{ range i, day := .Calendar }}
          <div class="col">
            <div class="ratio ratio-1x1">
              <div class="d-flex bg-charcoal-surface2 rounded overflow-hidden">
                {{ if day.DayNumber > 0 }}
                  {{ if day.ImageURL }}
                    <a href="{{ day.ArtworkLink }}" class="text-decoration-none w-100 h-100 position-relative">
                      <img src="{{ day.ImageURL }}" alt="Day {{ day.DayNumber }}" class="w-100 h-100 object-fit-cover" />
                      <div class="position-absolute top-0 start-0 p-2">
                        <span class="text-white fw-bold bg-dark bg-opacity-75 rounded-pill px-2 py-1">{{ day.DayNumber }}</span>
                      </div>
                    </a>
                  {{ else }}
                    <div class="d-flex align-items-center justify-content-center w-100 h-100">
                      <p class="fw-bold mb-0">{{ day.DayNumber }}</p>
                    </div>
                  {{ end }}
                {{ end }}
              </div>
            </div>
          </div>
          {{ end }}
        </div>

        <!-- Navigation buttons -->
        {{- include "fragments/rankingCalendarNav" . }}

      </div>
    </div>
  </div>
</div>

<!-- End of main content -->

<!-- Ranking options modal -->
<div class="modal fade" id="RankingOptionsModal" tabindex="-1" aria-labelledby="RankingOptionsModalLabel" aria-hidden="true" hx-boost="false">
  <div class="modal-dialog modal-lg">
    <div class="modal-content bg-charcoal-surface1 rounded-5 border-0 p-4">
      <div class="modal-header border-0 p-0 mb-3">
        <h2 class="modal-title" id="RankingOptionsModalLabel"><i class="bi bi-gear-fill me-2"></i>Ranking options</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-0">
        {{- Mode := isset(Queries.mode) ? Queries.mode : "daily" }}
        {{- url := "/rankingCalendar?date=" + .ThisMonth.Link + "&mode=" }}
        <div class="row border-bottom border-2 mb-4">
          <div class="col-12">
            <h3><i class="bi bi-calendar3 me-2"></i>Time frame</h3>
            <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
              {{- path := slice("daily", "weekly", "monthly", "rookie") }}
              {{- name := slice("Daily", "Weekly", "Monthly", "Rookie")}}
              {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
            </div>
            <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
              {{- path := slice("daily_r18", "weekly_r18", "r18g") }}
              {{- name := slice("Daily (R-18)", "Weekly (R-18)", "R-18G")}}
              {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
            </div>
            <p class="small text-body-secondary mb-4">Choose the time frame for the rankings.</p>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-12">
            <h3><i class="bi bi-star-fill me-2"></i>Specialized rankings</h3>
            <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Specialized ranking modes">
              {{- path := slice("original", "male", "female") }}
              {{- name := slice("Original", "Popular among males", "Popular among females")}}
              {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
            </div>
            <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="R-18 specialized ranking modes">
              {{- path := slice("male_r18", "female_r18") }}
              {{- name := slice("Popular among males (R-18)", "Popular among females (R-18)")}}
              {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
            </div>
            <p class="small text-muted mb-0">Specialized ranking categories.</p>
          </div>
        </div>

        <div class="row">
          <div class="col-12 d-flex justify-content-between">
            <a href="/rankingCalendar" type="button" class="btn btn-danger fw-bold rounded-pill">Reset filters</a>
            <button type="button" class="custom-btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{{- end }}
